<template>
	<view class="Box">
		<u-navbar :autoBack="false" title="订场订单" @leftClick="leftClick">
		</u-navbar>
		<view class="tabsBox">
			<u-tabs :activeStyle="{
			    color: '#4186f5',
				fontSize:'28rpx',
					width:'100rpx',
			    fontWeight: '800',
			    transform: 'scale(1)'
			}" :inactiveStyle="{
				        color: '#606266',
						fontSize:'28rpx',
							width:'100rpx',
				        transform: 'scale(1)'
				    }" :list="planList" @change="tabsChange"></u-tabs>
		</view>

		<view class="orderList">
			<view v-for="(item,index) in tableData" :key="index" class="">
				<view class="orderItem" @click="payDetailsEvent(item.orderStatus,item.orderNum)">
					<view class="itemTop">
						<image :src="item.img" class="orderImg">
						</image>
						<view class="informationBox">
							<view class="proposalName">
								{{ item.venueName }}
							</view>
							<view class="strokeBox">

								<view class="orderLineType">
									{{ item.dictName }}
								</view>
							</view>
							<!-- <view class="" v-if="!item.lineType">
                    <view class="WriteOffBox" v-if="item.orderStatus == 1"
                      @click.stop="WriteOffClick(item,1)">
                      <image
                        src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/WriteOffOne.png"
                        class="WriteOffImg">
                        <view class="WriteOffText">
                          查看核销码
                        </view>
                    </view>
                    <view class="WriteOffBox" v-if="item.orderStatus == 2"
                      @click.stop="WriteOffClick(item,2)">
                      <image
                        src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/WriteOffTwo.png"
                        class="WriteOffImg">
                        <view class="WriteOffText">
                          已核销
                        </view>
                    </view>
                  </view> -->
						</view>
					</view>
					<view class="itemBottom">
						<view v-if="item.orderStatus == 0 " class="orderStatusOne">
							待支付
						</view>
						<view v-if="item.orderStatus == 1" class="orderStatusOne">
							待核销
						</view>
						<view v-if="item.orderStatus == 2" class="orderStatusOne">
							已完成
						</view>
						<view v-if="item.orderStatus == 3" class="orderStatusOne">
							售后
						</view>
						<view v-if="item.orderStatus == 4" class="orderStatusOne">
							待核销
						</view>
						<view v-if="item.orderStatus == 5" class="orderStatusOne">
							已完成
						</view>
						<view v-if="item.orderStatus == 6" class="orderStatusOne">
							已取消
						</view>
						<view class="moneyBox">
							<view class="text">
								合计:
							</view>
							<view class="money">
								￥{{ item.amountPayable }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="moreBox">
			<view v-if="tableData.length < total">
				<u-loadmore line loadmoreText="滑动加载更多" status="loadmore" @loadmore="loadmore" />
			</view>

			<view v-else>
				<u-loadmore line loadmoreText="到底了" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		myOrder
	} from "@/api/challenge.js";

	export default {
		data() {
			return {
				tableData: [],
				total: 0,
				tel: '',
				planList: [{
					name: '全部',
					status: ''
				}, {
					name: '待支付',
					status: '0'
				}, {
					name: '待核销',
					status: '1'
				}, {
					name: '已完成',
					status: '2'
				}, {
					name: '售后',
					status: '3'
				}, ],
				status: "",
				pageNumber: 1,
				pageSize: 10
			}
		},
		onLoad() {
			this.tel = uni.getStorageSync('userinfo').phone
			// this.orderPageEvent()
		},
		onShow() {
			this.orderPageEvent()
		},
		onReachBottom() {
			this.pageNumber += 1
			this.orderPageEvent()
		},
		methods: {
			loadmore() {
				this.pageNumber += 1
				this.orderPageEvent()
			},
			leftClick() {
				uni.switchTab({
					url: "/pages/my/index"
				});
			},
			tabsChange(index) {
				this.status = index.status
				this.pageNumber = 1
				this.orderPageEvent()

			},
			payDetailsEvent(data, params) {

				uni.navigateTo({
					url: '/subpackageOne/venueRelated/venuePay/venuePay?type=' + data + '&orderSn=' + params
				})
			},
			orderPageEvent() {
				var objData = {
					tel: this.tel,
					type: 2,
					status: this.status,
					pageNumber: this.pageNumber,
					pageSize: this.pageSize
				}
				var data = {}
				for (let key in objData) {
					if (objData[key] != '') {
						data[key] = objData[key]
					}
				}
				myOrder(data).then(res => {
					if (this.pageNumber > 1) {
						res.records.forEach(item => {
							this.tableData.push(item)
						})
						this.total = res.total
					} else {
						this.tableData = res.records;
						this.total = res.total
					}
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.Box {
		width: 100%;
		min-height: 100vh;
		background-color: #f2f2f2;
		font-family: PingFang SC, PingFang SC-Heavy;
	}

	.tabsBox {
		background: #fff;
		padding-bottom: 12rpx;
		margin-top: 160rpx;
		text-align: center;
	}


	.orderList {
		.orderItem {
			margin: 32rpx 32rpx 0 32rpx;
			background-color: #fff;
			border-radius: 12rpx;

			.itemTop {
				display: flex;
				padding: 20rpx 0 20rpx 20rpx;
				border-bottom: 2rpx solid #eeeeee;
				position: relative;

				.orderImg {
					width: 152rpx;
					height: 152rpx;
					border-radius: 8rpx;
				}

				.informationBox {
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 4rpx 0 6rpx 0;

					.proposalName {
						font-weight: 800;
					}

					.strokeBox {
						display: flex;
						align-items: center;
						font-size: 24rpx;

						.orderLineType {
							padding: 0rpx 8rpx;
							border: 1px solid #4186f5;
							border-radius: 8rpx;
							color: #4186f5;
							margin-right: 10rpx;
						}

						.verticalLine {
							margin: 0 6rpx;
						}
					}

					.productQuantity {
						margin-bottom: 30rpx;
					}

					.WriteOffBox {
						width: 120rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						position: absolute;
						top: 34rpx;
						right: 40rpx;

						.WriteOffImg {
							width: 96rpx;
							height: 96rpx;
						}

						.WriteOffText {
							margin-top: 8rpx;
							font-size: 24rpx;
							color: #757575;
						}
					}
				}
			}

			.itemBottom {
				display: flex;
				padding: 20rpx;
				justify-content: space-between;
				font-weight: 800;

				.orderStatusOne {
					color: #ff9802;
				}

				.orderStatusTwo {
					color: #4186f5;
				}

				.orderStatusThree {
					color: #28b78d;
				}

				.orderStatusFour {
					color: #ff5e5e;
				}

				.orderStatusFive {
					color: #757575;
				}

				.moneyBox {
					display: flex;
					color: #ff5e5e;

					.text {
						margin-right: 16rpx;
					}

					.money {}
				}
			}

		}
	}

	.moreBox {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 200rpx;
	}
</style>